<template>
    <div class="BlogsEdit" >
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
        <h1>管理博客</h1>
        <el-table
                ref="singleTable"
                :data="tableData"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%">
            <el-table-column
                    property="id"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    property="updatedTime"
                    label="日期"
                    width="300">
            </el-table-column>
            <el-table-column
                    property="title"
                    label="标题"
                    width="300">
            </el-table-column>
<!--            <el-table-column
                    property="content"
                    label="内容"
                    :show-overflow-tooltip="true">
            </el-table-column>-->
            <el-table-column
                    property="type"
                    label="类型">
                <template slot-scope="scope">
                    <span v-if="scope.row.type === 0">原创</span>
                    <span v-if="scope.row.type === 1">转载</span>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
            <el-button type="primary" round  @click="moreBlog" v-show="this.showButton">加载更多</el-button>
            <el-button @click="changeBlog" type="success" plain v-bind:disabled="showAdmin">修改</el-button>
            <el-button @click="deleteBlog" type="danger" plain v-bind:disabled="showAdmin">删除</el-button>
            <el-button @click="giveupChoose" type="info" plain v-bind:disabled="showAdmin">取消</el-button>
        </div>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    export default {
        name: "BlogEdit",
        components:{ Loading  },
        data() {
            return {
                tableData: [],
                currentRow: null,
                showButton:true,
                pageNum:1,
                pageSize:2,
                showAdmin:true,
                isLoading:true,
            }
        },
        methods:{
            /**
             * 预览字数限制
             * @param date
             * @returns {string|*}
             */
            fontNumber (date) {
                const length = date.length
                if (length > 35) {
                    var str = ''
                    str = date.substring(0, 35) + '......点击查看文章'
                    return str
                } else {
                    return date
                }
            },
            changeBlog() {
                if(this.currentRow!==null){
                    // console.log('修改'+this.currentRow.blogId)
                    // console.log(this.currentRow)
                    this.$router.push({
                        name:'BlogChange',
                        params: {
                            // context:this.currentRow.body,
                            blogId:this.currentRow.id
                        }
                    })
                }else{
                    this.$message({
                        showClose: true,
                        message: '还未选择任何博客',
                        type: 'warning'
                    });
                }

            },
            deleteBlog(){
                if(this.currentRow.id!==null){
                    this.$confirm('此操作将永久删除该博客, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.axios.delete("/blog/" + this.currentRow.id).then((res) => {
                            console.log(res)
                        })
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        setTimeout(function(){
                            location.reload();//可以是一句或是很多句代码，也可以是个函数
                        },1000);//延时1秒
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }else{
                    this.$message({
                        showClose: true,
                        message: '还未选择任何博客',
                        type: 'warning'
                    });
                }
            },
            giveupChoose(){
                this.currentRow=null
                this.$refs.singleTable.setCurrentRow();
                this.showAdmin=!this.showAdmin
            },
            handleCurrentChange(val) {
                    this.currentRow=val
                // console.log(this.currentRow)
                if(this.showAdmin===true){
                    this.showAdmin=!this.showAdmin
                }

            },
            moreBlog(){
                this.axios.post('/blog/paging',
                    {
                        author:-1,
                        pageIndex:++this.pageNum,
                        pageSize:this.pageSize,
                        status:1,
                        type:-1
                    }).then((response) => {
                    this.tableData=this.tableData.concat(response.data.data.list)
                    if(this.pageNum >= response.data.data.totalPage){
                        // console.log(response.data.data)
                        this.showButton=false;
                    }
                })
            },
            getTopBlogs(){
                return this.axios.post('/blog/paging',
                    {
                      author:-1,
                      pageIndex:-1,
                      pageSize:-1,
                      status:1,
                      type:-1,
                      top: 1
                    })
            },
            getBlogs(){
                return this.axios.post('/blog/paging',
                    {
                        author:-1,
                        pageIndex:this.pageNum,
                        pageSize:this.pageSize,
                        status:1,
                        type:-1,
                        top: 0
                    })
            },
        },
        created() {
            // console.log("Blllll");
                var me = this;
                this.axios.all([me.getBlogs(), me.getTopBlogs()])
                    .then(me.axios.spread(function(getBlogs, getTopBlogs){
                        // console.log('所有请求完成')
                        // console.log('请求1结果',getBlogs.data)
                        // console.log('请求2结果',getTopBlogs)
                        /*if(getBlogs.data.code===401){
                            me.$router.push('/Login')
                            me.$message({
                                message: 'getBlogs.data.msg',
                                type: 'warning'
                            });
                            return
                        }*/
                        //console.log('请求1结果',getBlogs)
                        //console.log('请求2结果',getTopBlogs)
                        me.tableData=getTopBlogs.data.data.list
                        me.tableData=me.tableData.concat(getBlogs.data.data.list)
                        if (getBlogs.data.data.totalPage <= 1) {
                          me.showButton = false
                        }
                        me.isLoading=false
                    }))
        //     }else{
        //         this.$router.push('/404Page.html')
        //     }
         }
    }
</script>

<style scoped>
    .BlogsEdit{
        margin: 0 auto;
        max-width: 960px;
        text-align: center;
    }
    @media screen and (max-width: 500px) {
        .el-message {
            min-width: 300px !important;
        }
    }
    @media screen and (max-width: 500px) {
        .el-message-box{
            width: 300px !important;
        }
    }
</style>
